import React 					from 'react';
import PageTitle    	from 'component/pagetitle/index.jsx';
import CategorySelect	from './category-selector.jsx';
import FileUpload			from 'util/file-uploader/index.jsx';
import Util						from 'util/mm.jsx';
import Product				from 'service/product-service.jsx';
import RichEditor			from 'util/rich-editor/index.jsx';

const _mm 			= new Util();
const _product 	= new Product();

class ProductSave extends React.Component{
	constructor(props){
		super(props);
		this.state = {
			id							: this.props.match.params.pid,
			categoryId			: 0,
			parentCategoryId: 0,
			name						: '',
			subtitle				: '',
			subImages				: [],
			detail					: '',
			price						: '',
			stock						: '',
			status					: 1
		}
	}
	componentDidMount(){
		console.log(this.state.id);
		if(this.state.id){
			this.loadProduct();
		}
	}
	//查看商品详情进行回填
	loadProduct(){
		_product.getProduct(this.state.id)
						.then(res => {
							let images = res.subImages.split(',');
							res.subImages = images.map(imgUri => {
								return {
									uri:imgUri,
									url:res.imageHost + imgUri
								}
							})
							res.defaultDetail = res.detail;
							this.setState(res);
						},errMsg => {
							_mm.errorTips(errMsg);
						});
	}
	
	
	//品类变化
	onCategoryChange(firstCategoryId,secondCategoryId){
		console.log(firstCategoryId,secondCategoryId);
		this.setState({
			categoryId				: secondCategoryId === 0 ? firstCategoryId : secondCategoryId,
			parentCategoryId	: firstCategoryId
		})
	}
	//图片上传成功
	onUploadSuccess(fileInfo){
		this.state.subImages.push(fileInfo);
		this.setState({
			subImages:this.state.subImages
		});
	}
	
	//图片上传失败
	onUploadError(errmsg){
		_mm.errorTips(errmsg);
	}
	
	//删除照片
	onRemoveImage(e){
		this.state.subImages.splice(e.target.dataset.index,1);
		this.setState({
			subImages:this.state.subImages
		})
	}
	//富文本变化
	onRichEditorChange(detailValue){
		this.setState({
			detail:detailValue
		})
	}
	//普通输入框变化
	onInputValueChange(e){
		this.setState({
			[e.target.name]:e.target.value
		});
	}
	
	//提交表单
	onSubmit(){
		const productInfo = Object.assign({},this.state,{
			categoryId  : parseInt(this.state.categoryId),
			price       : parseFloat(this.state.price),
			stock       : parseInt(this.state.stock),
			subImages   : this.getSubImagesString(),

		});
		const checkProductResult = _product.checkProduct(productInfo);
		if(checkProductResult.status){
			_product.saveProduct(productInfo)
							.then(res => {
								_mm.successTips(res);
								this.props.history.push('/product/index');
							},errMsg => {
								_mm.errorTips(errMsg);
							})
		}else{
			_mm.errorTips(checkProductResult.msg);
		}
	}
	
	getSubImagesString(){
		return this.state.subImages.map((image) => image.uri).join(',');
	}
	render(){
		return (
			<div id="page-wrapper">
				<PageTitle title='添加商品' />
				<div className="form-horizontal">
				  <div className="form-group">
					<label  className="col-md-2 control-label">商品名称</label>
					<div className="col-md-5">
					  <input	type="text" className="form-control"  
																placeholder="请输入商品名称" 
																name='name'
																value={this.state.name}
																onChange={e => {this.onInputValueChange(e)}}/>
					</div>
				  </div>
				  <div className="form-group">
					<label  className="col-md-2 control-label">商品描述</label>
					<div className="col-md-5">
					  <input type="text" className="form-control"  
															 placeholder="请输入商品描述" 
															 name='subtitle'
															 value={this.state.subtitle}
															 onChange={e => {this.onInputValueChange(e)}} />
					</div>
				  </div>
				  <div className="form-group cate-select-wrapper">
					 <label  className="col-md-2 control-label">所属分类</label>
					 <CategorySelect 			categoryId={this.state.categoryId}
																parentCategoryId={this.state.parentCategoryId}
																onCategoryChange={(firstCategoryId,secondCategoryId) => this.onCategoryChange(firstCategoryId,secondCategoryId)}/>
				  </div>
				  <div className="form-group">
					  <label  className="col-md-2 control-label">商品价格</label>
					  <div className="col-md-3 input-group">
						<input type="number" className="form-control"  
																 placeholder="价格"
																 name='price'
																 value={this.state.price}
																 onChange={e => {this.onInputValueChange(e)}} />
						<span className="input-group-addon" >元</span>
					  </div>
				  </div>
				  <div className="form-group">
				  	<label  className="col-md-2 control-label">商品库存</label>
				  	<div className="col-md-3 input-group">
						<input type="number" className="form-control"  
																 placeholder="库存" 
																 name='stock'
																 value={this.state.stock}
																 onChange={e => {this.onInputValueChange(e)}}/>
						<span className="input-group-addon" >件</span>
				  	</div>
				  </div>
				  <div className="form-group">
					  <label  className="col-md-2 control-label upload-label">商品图片</label>
						<div className="col-md-10">
						{
							this.state.subImages.length > 0
							? this.state.subImages.map((image,index) => {
									return (
										<div key={index} className="upload-image-wrapper">
												<img src={image.url} />
												<i className="fa fa-close" data-index={index} onClick={e => {this.onRemoveImage(e)}}></i>
										</div>
									
									)
								})
								
							:	<span className="upload-tips">请上传图片</span>
						}
						</div>
					  <div className="col-md-3">
							<FileUpload 
									onSuccess={fileInfo => {this.onUploadSuccess(fileInfo)}} 
									onError={errmsg => {this.onUoloadError(errmsg)}} />
					  </div>
				  </div>
					<div className="form-group">
						<label  className="col-md-2 control-label">商品详情</label>
						<div className="col-md-10">
							<RichEditor placeholder="请编辑商品详情"
													onValueChange={detailValue => {this.onRichEditorChange(detailValue)}}
													defaultDetail={this.state.defaultDetail} />
						</div>
					</div>
				  <div className="form-group">
						<div className="col-md-offset-2 col-md-10">
							<button type="submit" className="btn btn-primary" onClick={this.onSubmit.bind(this)}>提交</button>
						</div>
				  </div>
				</div>
				
			</div>
		)
	}
}

export default ProductSave;
